<template>
  <div class="toast">{{ message }}</div>
  >
</template>

<script>
  import { reactive, toRefs } from 'vue'
  export default {
    name: 'Toast',
    props: { message: { type: String } }
  }
  /**
   * toast相关的逻辑
   */
  export const useToastEffect = () => {
    const toastData = reactive({
      show: false,
      message: ''
    })
    const toastMsg = (message, time) => {
      toastData.show = true
      toastData.message = message || ''
      setTimeout(() => {
        toastData.show = false
        toastData.message = ''
      }, time || 2000)
    }

    const { show, message } = toRefs(toastData)
    return { show, message, toastMsg }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/viriables.scss';
  .toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); //垂直水平居中
    padding: 0.1rem;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 0.05rem;
    color: $bg-color;
  }
</style>
